<template>
  <div class="container">
    <!-- 右侧内容区 -->
    <el-main>
      <!-- 交班信息填写 -->
      <el-card class="shift-handover-form">
        <el-form :model="handoverForm" label-width="120px">
          <el-form-item label="交班人">
            <el-input v-model="data.zjname" type="datetime" disabled></el-input>
          </el-form-item>

          <el-form-item label="交班时间">
            <el-date-picker v-model="data.handoverTime" type="datetime" disabled></el-date-picker>
          </el-form-item>
          <el-form-item label="工作内容总结">
            <el-input v-model="data.workSummary" type="textarea"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitHandover">提交交班</el-button>
          </el-form-item>
        </el-form>
      </el-card>

      <!-- 交班记录查询 -->
      <el-card class="shift-record">
        <div class="record-title">
          <div>交班记录</div>
          <div style="margin-left: 400px">
            <el-input
              v-model="datas.key"
              style="width: 240px; margin-right: 20px"
              placeholder="请输入名称"
            ></el-input>
            <el-button type="primary" @click="queryRecords">查询</el-button>
          </div>
        </div>
        <div>
          <el-table :data="data.nextshiftData" style="width: 100%; height: 240px">
            <el-table-column prop="employeeName" label="交班人"></el-table-column>
            <el-table-column prop="numberOfTransactions" label="交易笔数"></el-table-column>
            <el-table-column prop="totalAmount" label="收款总额"></el-table-column>
            <el-table-column prop="startTime" label="开始时间"></el-table-column>
            <el-table-column prop="endTime" label="交班时间"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <el-button type="primary" @click="viewDetails(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pagination-container">
          <el-pagination
            background
            :page-size="datas.limit"
            layout="prev, pager, next"
            :total="datas.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </el-main>
    <el-dialog
      v-model="data.dialogTableVisible"
      :destroy-on-close="true"
      title="交班详情"
      width="800"
    >
      <shiftsxx :data="data.nextshiftlist" />
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, watch } from "vue";
import { ElMessage } from "element-plus";
import shiftsxx from "@/components/shiftsxx.vue";
import { Get_shifts, Get_em_name, Up_shifts } from "@/api/nextshift";
import { useRouter } from "vue-router";
import { remove_token } from "@/utils/auth";

const router = useRouter();

const data = reactive({
  dialogTableVisible: false,
  name: "",
  loadings: false,
  handoverTime: "",
  zjname: "",
  zjid: "",
  workSummary: "",
  nextshiftData: [],
  nextshiftlist: [],
});

const datas = reactive({
  page: 1,
  limit: 6,
  total: 0,
  key: "",
});

//获取班次信息表
const viewDetails = (next) => {
  data.nextshiftlist = next;
  data.dialogTableVisible = true;
};

//接班提交
const submitHandover = async () => {
  var dt = data.handoverTime;
  data.handoverTime =
    dt.getFullYear() +
    "-" +
    (dt.getMonth() + 1 < 10 ? "0" + (dt.getMonth() + 1) : dt.getMonth() + 1) +
    "-" +
    (dt.getDate() < 10 ? "0" + dt.getDate() : dt.getDate()) +
    "T" +
    (dt.getHours() < 10 ? "0" + dt.getHours() : dt.getHours()) +
    ":" +
    (dt.getMinutes() < 10 ? "0" + dt.getMinutes() : dt.getMinutes()) +
    ":" +
    (dt.getSeconds() < 10 ? "0" + dt.getSeconds() : dt.getSeconds()) +
    "+08:00";
  const res = await Up_shifts({
    shiftId: data.zjid,
    endTime: data.handoverTime,
    remark: data.workSummary,
  });
  if (res.code === 0) {
    ElMessage({
      message: "交班成功",
      type: "success",
    });

    remove_token();
    setTimeout(() => {
      router.push("/login");
    }, 1000);
  }
};

const bind = async () => {
  data.loadings = true;
  const res = await Get_em_name({
    uid: JSON.parse(sessionStorage.getItem("curr_user")).id,
  });
  if (res.code === 0) {
    data.zjname = res.data.data.name;
    data.zjid = res.data.data.id;
  }
  const ress = await Get_shifts({ ...datas });
  if (ress.code === 0) {
    data.nextshiftData = ress.data.data;
    datas.total = ress.data.total;
  }
  data.loadings = false;
};

onMounted(() => {
  var dt = new Date();
  data.handoverTime = dt;

  bind();
});

// 监听数据变化
watch([datas], (newVal, oldVal) => {
  bind();
});
</script>

<style scoped>
.container {
  display: flex;
  height: calc(100vh - 80px);
  background-color: #f0f2f5;
}
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
.el-aside {
  background-color: #f3f3f3;
}
.el-main {
  padding: 20px;
}
.shift-handover-form {
  margin-bottom: 20px;
}
.record-title {
  margin-bottom: 10px;
  display: flex;
}
.shift-record {
  height: 350px;
}
.pagination-container {
  margin-top: 8px;
}
</style>
